import { lazy, ReactNode, Suspense } from "react";
import { Navigate } from "react-router-dom";
import MainPage from "@/layout/main"; // 解决切换页面会出现闪屏现象

import Loading from "@/pages/loading/loading";
// 登录
import Login from "@/pages/login/login";

// 用懒加载实现优化
const HomePage = lazy(() => import("@/pages/home/home"));
const Error404 = lazy(() => import("@/pages/404/404"));

// 实现懒加载的用Suspense包裹 定义函数
const LazyLoad = (children: ReactNode): ReactNode => {
  return <Suspense fallback={Loading()}>{children}</Suspense>;
};

export const routers = [
  {
    path: "/",
    element: <MainPage />,
    mete: {
      title: "首页",
    },
    children: [
      {
        index: true,
        element: LazyLoad(<HomePage />),
      },
    ],
  },
  {
    path: "/login",
    element: <Login />,
  },
  {
    path: "/404",
    element: <Error404 />,
  },
  {
    path: "*",
    element: <Navigate to="/" />,
  },
];
